<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>自环边设置动画</title>
</head>

<body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      G6.registerNode('circleNode', {
        drawShape(cfg, group) {
          const keyShape = group.addShape('circle', {
            attrs: {
              x: 0,
              y: 0,
              r: 30,
              fill: '#87e8de'
            }
          });

          return keyShape;
        }
      }, 'circle');
      
      G6.registerEdge('loop-growth', {
          afterDraw(cfg, group) {
              const shape = group.get('children')[0];
              const length = shape.getTotalLength();
              shape.animate({
              onFrame(ratio) {
                  const startLen = ratio * length;
                  // 计算线的lineDash
                  const cfg = {
                  lineDash: [startLen, length - startLen]
                  };
                  return cfg;
              },
              repeat: true
              }, 2000);
          }
      }, 'loop');

      const data = {
          nodes: [{
              x: 300,
              y: 300,
              shape: 'circleNode',
              label: 'rect',
              id:'node1',
              labelCfg: {
                  position: 'bottom'
              },
              anchorPoints: [
                  [0.5, 0, {type: 'circle', style: {stroke: 'red', fill: 'red'}}], 
                  [1, 0.5, {type: 'circle', style: {stroke: 'blue', fill: 'red'}}]
              ]
          }
          ],
          edges: [
              {
                  source: 'node1',
                  target: 'node1',
                  label: 'loop',
                  shape:'loop-growth',
                  labelCfg: {
                      refY: 10
                  }
              }
          ]
      };
    
      const graph = new G6.Graph({
      container: 'mountNode',
      width: 1000,
      height: 600,
      defaultEdge: {
       color: '#bae7ff'
     },
      modes: {
          default: ['drag-node']
        }
      });
      graph.data(data);
      graph.render(); 
    </script>
</body>

</html>